<template>
    <div class="dicom-container">
        <!-- 工具栏 -->
        <div class="toolbar">
            <button @click="setTool('Wwwc')">窗宽窗位</button>
            <button @click="setTool('Length')">长度测量</button>
            <button @click="setTool('Angle')">角度测量</button>
            <button @click="setTool('RectangleRoi')">矩形标注</button>
            <button @click="resetViewport">重置视图</button>
            <input type="file" @change="loadDicomFile" accept=".dcm" ref="fileInput">
        </div>

        <!-- 视图区域 -->
        <div ref="viewport" class="viewport"></div>
    </div>
</template>

<script>
import dicomParser from 'dicom-parser';
// import Hammer from 'hammerjs';
import cornerstone from 'cornerstone-core';
import cornerstoneMath from 'cornerstone-math';
import cornerstoneTools from 'cornerstone-tools';
import Hammer from 'hammerjs';
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'

// 初始化工具
const initTools = () => {


    // 配置依赖
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneTools.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.webWorkerManager.initialize();
    // 注册工具
    cornerstoneTools.init({
        globalToolSyncEnabled: true,
        showSVGCursors: true
    });
    // 添加工具
    cornerstoneTools.addTool(cornerstoneTools.WwwcTool);
    cornerstoneTools.addTool(cornerstoneTools.LengthTool);
    cornerstoneTools.addTool(cornerstoneTools.AngleTool);
    cornerstoneTools.addTool(cornerstoneTools.RectangleRoiTool);
};

export default {
    name: 'DicomViewer',
    data() {
        return {
            currentImageId: null,
            element: null,
            dicomFiles: []
        };
    },
    mounted() {
        this.initViewer();
    },
    beforeDestroy() {
        this.disableViewer();
    },
    methods: {

        initViewer() {
            // 初始化元素
            this.element = this.$refs.viewport;
            cornerstone.enable(this.element);

            // 初始化工具
            initTools();

            // 配置图像加载器
            const wadoLoader = {
                webWorkerManager: {
                    initialize: () => { }
                }
            };
            wadoLoader.external = {
                cornerstone,
                dicomParser
            };
        },
        async loadDicomFile(event) {
            const file = event.target.files[0];
            if (!file) return;

            try {
                // 读取文件
                const arrayBuffer = await this.readFileAsArrayBuffer(file);

                // 生成图像ID
                const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
                this.currentImageId = imageId;

                // 加载并显示图像
                const image = await cornerstone.loadImage(imageId);
                cornerstone.displayImage(this.element, image);

            } catch (error) {
                console.error('加载DICOM失败:', error);
                alert('文件加载失败，请检查是否为有效DICOM文件');
            }
        },

        readFileAsArrayBuffer(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.onerror = reject;
                reader.readAsArrayBuffer(file);
            });
        },

        setTool(toolName) {
            // 停用所有工具
            // cornerstoneTools.setToolPassive('Wwwc');
            // cornerstoneTools.setToolPassive('Length');
            // cornerstoneTools.setToolPassive('Angle');
            // cornerstoneTools.setToolPassive('RectangleRoi');

            // 激活选定工具
            cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });
        },

        resetViewport() {
            if (this.element && this.currentImageId) {
                cornerstone.reset(this.element);
            }
        },

        disableViewer() {
            if (this.element) {
                cornerstone.disable(this.element);
            }
        }
    }
};
</script>

<style scoped>
.dicom-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.toolbar {
    padding: 10px;
    background: #f0f0f0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbar button {
    padding: 5px 10px;
    cursor: pointer;
}

.viewport {
    width: 100%;
    height: calc(100vh - 50px);
    background-color: #000;
}
</style>